<template>
	<view class="content">
        <mine-head title="详情"></mine-head>
        <view class="item">
            <view class="top" @click.stop="goTo('/pages/comB/community/home?id=' + indexData.user.id)">
                <view class="pic fl"><image :src="baseUrl + indexData.user.photo" mode=""></image></view>
                <view class="text">
                    <view class="name">{{indexData.user.nickName}}</view>
                    <view class="time">{{indexData.createTime}}</view>
                </view>
            </view>
            <view class="bot">
                <view class="textC clamp4">
                    {{indexData.content}}
                </view>
                <view class="img">
                    <view class="pic" v-for="(img,index2) in indexData.mulImg" @click.stop="imgPreview(indexData.mulImg,img,index2)" :key="index2"><image :src="baseUrl + img" mode=""></image></view>
                </view>
                <view class="info">#{{indexData.topic}}</view>
                <view class="btn">
                    <view :class="{on:indexData.isLike}" @click.stop="onLike(indexData.isLike,indexData.id,index,1)">{{indexData.likeCount}}</view>
                </view>
            </view>
        </view>
        <view class="list">
            <view class="title" v-if="total>0">全部评论（{{total}}）</view>
            <view class="dd" v-for="(item,index) in indexList" :key="index">
                <view class="top" @click.stop="goTo('/pages/comB/community/home?id=' + item.createBy)">
                    <view class="pic fl"><image :src="baseUrl + item.photo" mode=""></image></view>
                    <view class="btn fr">
                        <view :class="{on:item.isLike}" @click.stop="onLike(item.isLike,item.id,index,2)">{{item.likeCount}}</view>
                        <view v-if="item.currentUser" @click.stop="plDelete(item.id,index,1)"></view>
                    </view>
                    <view class="text">
                        <view class="name">{{item.createByText}}</view>
                        <view class="time">{{item.createTime}}</view>
                    </view>
                </view>
                <view class="info">
                    <view @click="selectInput(item,index)">{{item.content}}</view>
                    <view class="newdd" v-for="(str,index2) in item.smollList" :key="index2">
                        <view class="top" @click.stop="goTo('/pages/comB/community/home?id=' + str.createBy)">
                            <view class="pic fl"><image :src="baseUrl + str.photo" mode=""></image></view>
                            <view class="btn fr">
                                <view :class="{on:str.isLike}" @click.stop="onLike(str.isLike,str.id,index,3,index2)">{{str.likeCount}}</view>
                                <view v-if="str.currentUser" @click.stop="plDelete(str.id,index,2,index2)"></view>
                            </view>
                            <view class="text">
                                <view class="name">{{str.createByText}}<text v-if="str.replyByText">{{str.replyByText}}</text></view>
                                <view class="time">{{str.createTime}}</view>
                            </view>
                        </view>
                        <view class="info" @click="selectInput(str,index)">
                            {{str.content}}
                        </view>
                    </view>
                    <view class="clear"></view>
                    <view class="more" :class="{on:item.smollList.length==item.replyCount}" v-if="item.replyCount>0" @click="changePage(item)">
                        {{item.smollList.length==0?'展开' + item.replyCount +'条回复':item.smollList.length==item.replyCount?'收起':'展开更多'}}
                    </view>
                    <view class="clear"></view>
                </view>
            </view>
        </view>
        <view class="footer">
            <view class="btn fr" @click="pinlun()">评论</view>
            <view class="input">
                <input type="text" ref="input" :focus="focus" v-model="content" @confirm="pinlun()" :placeholder="name?'回复' + name:'评论该动态'">
            </view>
        </view>
	</view>
</template>

<script>
    import config from '@/utils/config';
	export default {
		data() {
			return {
                page:1,
                baseUrl:config.host1,
				indexData:[],
                id:null,
                indexList:[],
                content:null,
                total:0,
                commentId:null,
                name:null,
                plIndex:null,
                focus:false
			};
		},
        onShow() {
        	
        },
        onLoad(option) {
            this.id=option.id
        	this.getView(option.id)
            this.getList()
        },
        onReachBottom() {
            this.page=this.page+1
            this.getList()
        },
        methods:{
			imgPreview(list,url,index) {
				let arr = []
				list.forEach((item, index) => {
					if (item) {
						let str = this.baseUrl +item
						arr.push(str)
					}
				})
				// let index = arr.findIndex(value => value == url)
				console.log(index)
				uni.previewImage({
					current: index,
					urls: arr,
				});
			},
            goTo(url){
                uni.$_navFn('to',url)
            },
            getView(id) {
            	let that = this;
                uni.$_get({
                	url: "upDate-view|"+'?id=' + id,
                	that: that,
                	success(res) {
                		if(res.code == 0){
                			that.indexData = res.data
                		}
                	},
                    fail(err) {
                    	console.log(err)
                    }
                });
            },
            getList() {
            	let that = this;
                let p = {
                    dynamic:that.id,
                    pageNo:that.page,
                    pageSize:10
                }
                uni.$_post({
                    url: "pinlun-list",
                    that: that,
                    params: p,
                    success(res) {
                        if(res.code == 0){
                            var list=[]
                            that.indexList.forEach(item => {
                                list.push(item)
                            })
                            res.data.records.forEach(item => {
                                item.smollList=[]
                                item.page=1
                                list.push(item)
                            })
                            that.indexList = list
                            that.total=res.data.total
                            console.log(that.indexList,666)
                        }  
                    },
                    fail(err) {
                    	console.log(err)
                    }
                });
            },
            onLike(key,id,index,num,index2){
                let that = this;
                let p
                num==1?p = {dynamicId:that.id}:p ={dynamicId:that.id,commentId:id}
                uni.$_post({
                    url: key?'cancel-like':'is-like',
                    that: that,
                    params: p,
                    success(res) {
                        if(res.code == 0){
                            if(num==1){
                                that.indexData.isLike=!that.indexData.isLike
                                key?that.indexData.likeCount=that.indexData.likeCount-1:that.indexData.likeCount=that.indexData.likeCount+1
                            }else if(num==2){
                                that.indexList[index].isLike=!that.indexList[index].isLike
                                key?that.indexList[index].likeCount=that.indexList[index].likeCount-1:that.indexList[index].likeCount=that.indexList[index].likeCount+1
                            }else{
                                that.indexList[index].smollList[index2].isLike=!that.indexList[index].smollList[index2].isLike
                                key?that.indexList[index].smollList[index2].likeCount=that.indexList[index].smollList[index2].likeCount-1:that.indexList[index].smollList[index2].likeCount=that.indexList[index].smollList[index2].likeCount+1
                            }
                            
                        }
                    },
                    fail(err) {
                    	console.log(err)
                    }
                });
            },
            plDelete(id,index,num,index2){
                let that = this;
                uni.$_publicModal('确认删除',function(){
                    let p = {
                        id:id
                    }
                    uni.$_get({
                    	url: "pinlun-delete|"+'?id=' + id,
                        that: that,
                        params: p,
                        success(res) {
                            if(res.code == 0){
                                uni.$u.toast('删除成功')
                                if(num==1){
                                    that.indexList.splice(index,1)
                                    that.total--
                                }else{
                                    that.indexList[index].smollList.splice(index2,1)
                                    that.indexList[index].replyCount--
                                }
                            }
                        },
                        fail(err) {
                        	console.log(err)
                        }
                    });
                })
            },
            pinlun(){
                let that = this;
                let p = {
                    dynamicId:that.id,
                    content:that.content,
                    commentId:that.commentId
                }
                uni.$_post({
                    url: 'pinlun',
                    that: that,
                    params: p,
                    success(res) {
                        if(res.code == 0){
                            if(that.commentId){
                                that.indexList[that.plIndex].smollList.unshift(res.data)
                                that.indexList[that.plIndex].replyCount++
                                that.commentId=null
                                that.name=null
                            }else{
                                that.indexList.unshift(res.data)
                                that.total++
                            }
                            that.focus = false
                            that.content=null
                        }
                    },
                    fail(err) {
                    	console.log(err)
                    }
                });
            },
            selectInput(item,index){
                this.focus = true
                this.commentId=item.id
                this.plIndex=index
                this.name=item.createByText
                console.log(item)
            },
            changePage(item){
                let that = this;
                let p = {
                    pageNo:item.page,
                    pageSize:6,
                    comment:item.id
                }
                uni.$_post({
                    url: 'pinlunXj-list',
                    that: that,
                    params: p,
                    success(res) {
                        if(res.code == 0){
                            if(item.smollList.length==item.replyCount){
                                item.smollList=[]
                                item.page=1
                            }else{
                                var list=item.smollList
                                res.data.records.forEach(item => {
                                    item.total=res.data.total
                                    list.push(item)
                                })
                                item.smollList=list
                                item.page++
                            }
                        }
                    },
                    fail(err) {
                    	console.log(err)
                    }
                });
            }
        }
	}
</script>

<style lang="scss">
    .content{
        padding: 120rpx 30rpx 175rpx;
        min-height: 100vh;
        box-sizing: border-box;
        .item{
            margin-bottom: 30rpx;
            .top{
                margin-bottom: 20rpx;
                overflow: hidden;
                .pic{
                    width: 85rpx;
                    border-radius: 50%;
                    overflow: hidden;
                    margin-right: 20rpx;
					background: url("/static/img/mine/defalt.png") no-repeat center / cover;
                    &::before{
                        padding-top: 100%;
                        
                    }
                }
                .btn{
                    width: 134rpx;
                    height: 60rpx;
                    line-height: 60rpx;
                    border-radius: 30rpx;
                    text-align: center;
                    background: #759dff;
                    color: #fff;
                    font-size: 26rpx;
                    margin-left: 20rpx;
                    margin-top: 10rpx;
                }
                .text{
                    overflow: hidden;
                    padding-top: 5rpx;
                    .name{
                        font-size: 30rpx;
                        color: #999999;
                        line-height: 32rpx;
                        margin-bottom: 15rpx;
                    }
                    .time{
                        font-size: 22rpx;
                        color: #959595;
                        line-height: 28rpx;
                        text{
                            padding: 0 10rpx;
                            background: #fadfde;
                            border-radius: 30px;
                            height: 28rpx;
                            font-size: 18rpx;
                            color: #ee7671;
                            margin-right: 8rpx;
                        }
                    }
                }
            }
            .bot{
                margin-left: 105rpx;
                border-bottom: 1rpx solid #e5e5e5;
                padding-bottom: 30rpx;
                .textC{
                    margin-bottom: 25rpx;
                    font-size: 28rpx;
                    line-height: 40rpx;
                    color: #000000;
                }
                .img{
                    overflow: hidden;
                    margin-bottom: 15rpx;
                    .pic{
                        display: inline-block;
                        margin: 0 10rpx 10rpx;
                        width: calc(33.3333% - 20rpx);
						background: url("/static/img/mine/defalt.png") no-repeat center / cover;
                        &::before{
                            padding-top: 100%;
                        }
                    }
                    .pic:nth-child(3){
                        margin-right: 0;
                    }
                }
                .info{
                    font-size: 28rpx;
                    color: #647fd6;
                    line-height: 34rpx;
                    margin-bottom: 25rpx;
                }
                .btn{
                    overflow: hidden;
                    view{
                        font-size: 24rpx;
                        line-height: 30rpx;
                        color: #aaaaaa;
                        margin-right: 42rpx;
                        padding-left: 50rpx;
                        background: url("/static/img/community/zan.png") no-repeat center left / 32rpx;
                        float: left;
                        display: inline;
                    }
                    view:nth-child(1).on{
                        background-image: url("/static/img/community/zanh.png");
                    }
                    view:nth-child(2){
                        background-image: url("/static/img/community/pl.png");
                    }
                }
            }
        }
        .list{
            .title{
                font-size: 28rpx;
                font-weight: bold;
                color: #000000;
                line-height: 30rpx;
                margin-bottom: 50rpx;
            }
            .dd{
                margin-bottom: 40rpx;
                .top{
                    margin-bottom: 20rpx;
                    overflow: hidden;
                    .pic{
                        width: 80rpx;
                        border-radius: 50%;
                        overflow: hidden;
                        margin-right: 20rpx;
						background: url("/static/img/mine/defalt.png") no-repeat center / cover;
                        &::before{
                            padding-top: 100%;
                            
                        }
                    }
                    .btn{
                        overflow: hidden;
                        margin-top: 20rpx;
                        view{
                            font-size: 24rpx;
                            line-height: 30rpx;
                            color: #aaaaaa;
                            margin-left: 42rpx;
                            padding-left: 50rpx;
                            background: url("/static/img/community/zan.png") no-repeat center left / 32rpx;
                            float: left;
                            display: inline;
                            height: 30rpx;
                        }
                        view:nth-child(1).on{
                            background-image: url("/static/img/community/zanh.png");
                            margin-left: 0;
                        }
                        view:nth-child(2){
                            background-image: url("/static/img/community/delete.png");
                        }
                    }
                    .text{
                        overflow: hidden;
                        padding-top: 2rpx;
                        .name{
                            font-size: 30rpx;
                            color: #999999;
                            line-height: 32rpx;
                            margin-bottom: 15rpx;
                        }
                        .time{
                            font-size: 22rpx;
                            color: #959595;
                            line-height: 28rpx;
                            text{
                                padding: 0 10rpx;
                                background: #fadfde;
                                border-radius: 30px;
                                height: 28rpx;
                                font-size: 18rpx;
                                color: #ee7671;
                                margin-right: 8rpx;
                            }
                        }
                    }
                }
                .info{
                    font-size: 26rpx;
                    line-height: 32rpx;
                    color: #111111;
                    margin-left: 105rpx;
                    border-bottom: 1rpx solid #e5e5e5;
                    padding-bottom: 40rpx;
                    .newdd{
                        margin-top: 20rpx;
                        .top{
                            .pic{
                                width: 44rpx;
                            }
                            .text{
                                .name{
                                    text{
                                        padding-left: 40rpx;
                                        background: url("/static/img/community/next.png") no-repeat center left 15rpx / 15rpx;
                                    }
                                }
                            }
                        }
                        .info{
                            margin-left: 72rpx;
                            border-bottom: none;
                            padding-bottom: 10rpx;
                        }
                    }
                    .more{
                        font-size: 24rpx;
                        line-height: 24rpx;
                        color: #999;
                        padding: 0 30rpx 0 40rpx;
                        position: relative;
                        background: url("/static/img/community/btnx.png") no-repeat center right / 16rpx;
                        float: left;
                        display: inline;
                        margin-top: 30rpx;
                        &::before{
                            display: block;
                            content: "";
                            position: absolute;
                            left: 0;
                            top: 50%;
                            width: 35rpx;
                            height: 1rpx;
                            background: #ddd;
                        }
                    }
                    .more.on{
                        background-image: url("/static/img/community/btnxh.png");
                    }
                }
                
            }
        }
        .footer{
            position: fixed;
            left: 0;
            bottom:0;
            right: 0;
            padding: 20rpx 40rpx 80rpx;
            box-sizing: border-box;
            background: #f5f5f5;
            overflow: hidden;
            z-index: 10;
            .btn{
                width: 114rpx;
                height: 70rpx;
                text-align: center;
                font-size: 28rpx;
                line-height: 70rpx;
                color: #ffffff;
                background: #647fd6;
                margin-left: 20rpx;
                border-radius: 10px;
            }
            .input{
                overflow: hidden;
                input{
                    display: block;
                    width: 100%;
                    height: 70rpx;
                    line-height: 70rpx;
                    box-sizing: border-box;
                    padding: 0 30rpx;
                    font-size: 26rpx;
                    color: #333;
                    background: #ffffff;
                    border-radius: 10px;
                    &::placeholder{
                        color: #888888;
                    }
                }
            }
        }
    }
</style>
